<template>
	<el-form ref="activityRefFrom" :model="activityQuery" label-width="110px" :rules="activityRules">

		<el-form-item label="负责人" prop="ownerId">
			<el-select v-model="activityQuery.ownerId" @click="loadOwner" placeholder="请选择负责人" style="width: 100%;">
				<el-option v-for="item in ownerOptions" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>

		<el-form-item label="活动名称" prop="name">
			<el-input v-model="activityQuery.name" style="width:100%;" />
		</el-form-item>

		<el-form-item label="开始时间" prop="startTime">
			<el-date-picker v-model="activityQuery.startTime" type="datetime" placeholder="请选择开始时间"
				value-format="YYYY-MM-DD HH:mm:ss" clearable style="width:100%;" />
		</el-form-item>

		<el-form-item label="结束时间" prop="endTime">
			<el-date-picker v-model="activityQuery.endTime" type="datetime" placeholder="请选择结束时间"
				value-format="YYYY-MM-DD HH:mm:ss" clearable style="width:100%;" />
		</el-form-item>

		<el-form-item label="活动预算" prop="cost">
			<el-input v-model="activityQuery.cost" style="width:100%;" />
		</el-form-item>

		<el-form-item label="活动描述" prop="description">
			<el-input v-model="activityQuery.description" style="width: 100%" :rows="6" type="textarea"
				placeholder="请输入活动描述" />
		</el-form-item>

		<el-form-item label="">
			<el-button type="primary" @click="activitySubmit">提交</el-button>
			<el-button @click="goBack">返回</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import {
		defineComponent
	} from 'vue'
	import {
		doGet,
		doPost
	} from '../http/httpRequest'
	import {
		messageTip
	} from '../util/util'

	export default defineComponent({
		name: "ActivityRecordView.vue",
		// 注入父级页面提供的所有属性、函数对象
		inject: ['reload'],

		data() {
			return {
				// 新增市场活动表单对象
				activityQuery: {},
				// 录入市场活动表单验证规则
				activityRules: {
					ownerId: [{
						required: true,
						message: '请选择负责人',
						trigger: 'blur'
					}],
					name: [{
							required: true,
							message: '活动名称不能为空',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 128,
							message: '活动名称长度范围为5-128个字符',
							trigger: 'blur'
						}
					],
					startTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'blur'
					}, ],
					endTime: [{
						required: true,
						message: '请选择结束时间',
						trigger: 'blur'
					}, ],
					cost: [{
							required: true,
							message: '请输入活动预算',
							trigger: 'blur'
						},
						{
							pattern: /^[0-9]+(\.[0-9]{2})?$/,
							message: '活动预算必须是整数或者两位小数',
							trigger: 'blur'
						}
					],
					description: [{
							required: true,
							message: '活动描述不能为空',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 255,
							message: '活动名称长度范围为5-255个字符',
							trigger: 'blur'
						}
					]
				},
				// 负责人下拉选项
				ownerOptions: [{}]
			}
		},

		methods: {
			// 加载负责人
			loadOwner() {
				doGet("/api/owner", {}).then(resp => {
					if (resp.data.code === 200) {
						this.ownerOptions = resp.data.data;
					}
				})
			},
			// 返回函数
			goBack() {
				this.$router.go(-1);
			},

			// 新增市场活动
			activitySubmit() {
				let formData = new FormData()
				for (let field in this.activityQuery) {
					// formDate存的是键值对形式
					formData.append(field, this.activityQuery[field])
				}

				this.$refs.activityRefFrom.validate((valid) => {
					if (valid) {
						// doPost("/api/activity/add", {
						// 	formData
						// }).then(resp => {
						// 	if (resp.data.code === 200) {
						// 		// 提示语
						// 		messageTip("提交成功", "success");
						// 		// 页面刷新
						// 		//this.reload();
						// 	} else {
						// 		messageTip("提交失败", "error");
						// 	}
						// })

						doPost("/api/activity/add", formData).then(resp => {
							if (resp.data.code === 200) {
								// 提示语
								messageTip("提交成功", "success");
								// 页面刷新
								this.reload();
							} else {
								messageTip("提交失败", "error");
							}
						})
					}
				})
			}
		}


	})
</script>
<style>
</style>